<template>
    <div class="login-container">
        <!-- <div class="login-logo-wrap">
            <div class="logo"></div>
        </div> -->
        <img src="../../../assets/image/login/login-logo.png" class="navlogo"/>
        <div class="login-form">
            <div class="login-form-inner">
                <!--                <img class="logo" src="../../../assets/image/header/logo_1.png" alt srcset />-->
                <div class="logo">
                    <p class="title_one">电力信息报送应用</p>
                    <!-- <p class="title_two">管理系统</p> -->
                </div>
                <div class="welcome_txt">欢迎登录</div>
                <div class="form-scan-wrap">
                    <el-form
                        class="form-wrap-left"
                        :model="loginForm"
                        :rules="rules"
                        ref="loginForm"
                        label-width="0px"
                    >
                        <el-form-item label prop="login_name">
                            <el-input
                                v-model="loginForm.login_name"
                                maxlength="11"
                                placeholder="请输入账号"
                            >
                                <i
                                    slot="prefix"
                                    class="el-input__icon el-user"
                                ></i>
                            </el-input>
                        </el-form-item>
                        <el-form-item label prop="login_password">
                            <el-input
                                type="password"
                                v-model="loginForm.login_password"
                                maxlength="20"
                                placeholder="请输入登录密码"
                            >
                                <i
                                    slot="prefix"
                                    class="el-input__icon el-pwd"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <!-- <div class="qrcode">
                        <img src="../../../assets/image/app/qrcode.png" alt srcset />
                        <p style="color: #FFFFFF;font-size: 12px;margin-top: 4px">
                            安卓APP下载
                        </p>
                    </div> -->
                </div>
                <div class="form-bottom">
                    <!-- <el-checkbox v-model="checked" @change="rememberAccunt"
                        style="text-color:'#ffffff';margin-top: 6px">记住密码</el-checkbox> -->
                    <!-- <div class="find-pwd" @click="findPwd">找回密码</div> -->
                </div>
                <el-button
                    :disabled="disabled"
                    :class="[
                        'login-btn',
                        { disabled: disabled },
                        {
                            'login-submit-btn':
                                loginForm.login_name && loginForm.login_password
                        }
                    ]"
                    type="primary"
                    @click="handleLogin()"
                    >{{ disabled ? "正在登录..." : "登录" }}</el-button
                >
            </div>
        </div>
        <reset-pwd :isVisible.sync="isVisible" :showClose="false"></reset-pwd>
    </div>
</template>
<script>
import * as api from "@/http/admin-api.js";
import AES from "crypto-js/aes";
import CryptoJS from "crypto-js";
import ResetPwd from "../../layout/reset-pwd";
export default {
    components: {
        ResetPwd
    },
    data() {
        return {
            loginForm: {
                login_name: "",
                login_password: ""
            },
            rules: {
                login_name: [
                    {
                        required: true,
                        message: "账号不能为空",
                        trigger: "blur"
                    }
                ],
                login_password: [
                    {
                        required: true,
                        message: "密码不能为空",
                        trigger: "blur"
                    }
                ]
            },
            provinceList: [],
            cityList: [],
            checked: false,
            CRYPTOJSKEY: "abcdefghighkml",
            disabled: false,
            isVisible: false
        };
    },
    watch: {
        userInfo: {
            handler(newVal) {
                if (this.$store.state.login.userInfo.is_default_pwd == "1") {
                    this.isVisible = true;
                }
                return this.$store.state.login.userInfo;
            },
            immediate: true
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.login.userInfo;
        }
    },
    created() {
        if (this.$cookie.get("user")) {
            this.decryptAccount();
        }
        if (this.$route.query && this.$route.query.login_name) {
            this.loginForm.login_name = this.$route.query.login_name;
            this.loginForm.login_password = this.$route.query.login_password;
            sessionStorage.setItem("flg", this.$route.query.flg);
            this.$router.replace("/login");
            this.handleLogin(true);
        } else {
            sessionStorage.clear();
        }
        document.addEventListener("keydown", this.enterKeyUp);
    },
    methods: {
        enterKeyUp(e) {
            let key = window.event.keyCode || e.keyCode;
            if (key === 13) {
                this.handleLogin();
            }
        },
        /**
         * 路由跳转
         * params { url : 路由路径}
         */
        routerGo(url) {
            this.$router.push(url);
        },
        /**
         * 登录
         */
        handleLogin(status) {
            this.rememberAccunt();
            if (status) {
                api.submitLogin(this.loginForm).then(res => {
                    if (res) {
                        this.$store.dispatch("getUserInfo");
                    }
                });
            } else {
                this.$refs["loginForm"].validate(valid => {
                    if (valid) {
                        this.disabled = true;
                        api.submitLogin(this.loginForm).then(res => {
                            if (res && res.error_code === "0") {
                                sessionStorage.setItem("token", res.token);
                                this.getGwAllParm();
                                this.getUserInfo();
                            }
                            this.disabled = false;
                        });
                    } else {
                        return false;
                    }
                });
            }
        },
        /**
         * 获取用户信息
         */
        getUserInfo() {
            this.$store.dispatch("getUserInfo");
        },
        /**
         * 获取配置数据
         */
        getGwAllParm() {
            api.getGwAllParm().then(res => {
                if (res) {
                    sessionStorage.setItem("gwParamMap", JSON.stringify(res.bus_json));
                }
            });
        },
        /**
         * 记住账号--加密
         */
        rememberAccunt() {
            if (this.checked) {
                const username = CryptoJS.AES.encrypt(
                    this.loginForm.login_name,
                    this.CRYPTOJSKEY
                ).toString();
                const password = CryptoJS.AES.encrypt(
                    this.loginForm.login_password,
                    this.CRYPTOJSKEY
                ).toString();
                this.$cookie.set("user", username + "-" + password, 30);
            } else {
                this.$cookie.delete("user");
            }
        },
        /**
         * 记住密码 账号解密
         */
        decryptAccount() {
            const [username, password] = this.$cookie.get("user").split("-");
            const usernameStr = CryptoJS.AES.decrypt(
                username,
                this.CRYPTOJSKEY
            );
            const passwordStr = CryptoJS.AES.decrypt(
                password,
                this.CRYPTOJSKEY
            );
            const usernameOrigin = usernameStr.toString(CryptoJS.enc.Utf8);
            const passwordOrigin = passwordStr.toString(CryptoJS.enc.Utf8);
            this.loginForm.login_name = usernameOrigin;
            this.loginForm.login_password = passwordOrigin;
            this.checked = true;
        },
        findPwd() {
            // this.$router.push("/find-pwd");
            window.open("/find-pwd", "_blank");
        }
    },
    destroyed() {
        document.removeEventListener("keydown", this.enterKeyUp);
    }
};
</script>
<style lang="scss">
.login-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 15%;
    box-sizing: border-box;
    background: #f0f2f5 url("../../../assets/image/login/login-bg.png")
        no-repeat;
    background-size: 100% 100%;
    position: relative;
    .navlogo {
        width: 220px;
        height: auto;
        position: absolute;
        top: 10%;
        left: 19%;
    }
    .login-logo-wrap {
        background: url("../../../assets/image/app/logo.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 3%;
        top: 4%;
        height: 30px;
        width: 200px;
    }

    .login-form {
        // width: 1.9rem;
        // width: 2.2rem;
        // height: 2.1rem;
        width: 425px;
        height: 405px;
        min-width: 350px;
        min-height: 350px;
        //background: rgba(0, 0, 0, 0.5);
        background: #fff;
        // border: 0.5px solid #00c1de;
        border-radius: 10px;
        background-size: 100% 100%;
        transform: translate(0%, -35%);

        .login-form-inner {
            width: 340px;
            height: 180px;
            position: absolute;
            left: 50%;
            top: 50%;

            .form-scan-wrap {
                width: 100%;
                display: inline-flex;
                justify-content: space-between;

                .form-wrap-left {
                    //  width: calc(100% - 0.6rem);
                    width: 100%;
                }

                .qrcode {
                    width: 0.53rem;
                    height: 0.53rem;

                    img {
                        width: 80%;
                        height: 80%;
                    }
                }
            }
            .welcome_txt {
                color: #afa9a9;
                text-align: left;
                font-size: 14px;
            }
            transform: translate(-50%, -90%);

            .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #ffffff;
            }

            .el-checkbox__input.is-checked .el-checkbox__inner,
            .el-checkbox__input.is-indeterminate .el-checkbox__inner {
                background-color: #00c1de;
                border-color: #00c1de;
            }

            .el-input--prefix .el-input__inner {
                padding-left: 40px;
            }

            .el-user {
                width: 15px;
                height: 19px;
                display: inline-block;
                background: url("../../../assets/image/login/user.png")
                    no-repeat;
                background-size: 100% 100%;
                margin-top: 10px;
                margin-left: 10px;
            }

            .el-pwd {
                width: 15px;
                height: 19px;
                margin-top: 10px;
                margin-left: 10px;
                display: inline-block;
                background: url("../../../assets/image/login/pwd.png") no-repeat;
                background-size: 100% 100%;
            }

            .logo {
                width: 290px;
                margin: 0 auto;
                margin-bottom: 0.1rem;
                color: #000;
                line-height: 60px;
                .title_one {
                    font-size: 34px;
                }
                .title_two {
                    font-size: 26px;
                }
            }

            .form-bottom {
                margin-top: -0.05rem;
                margin-bottom: 0.2rem;
                width: 225px;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;

                .find-pwd {
                    color: #fff;
                    font-size: 14px;
                    padding-top: 4px;
                    cursor: pointer;
                    text-decoration: underline;
                }
            }

            .login-btn {
                // color: #fff;
                //  color: #333;
                height: 0.24rem;
                line-height: 0.24rem;
                cursor: pointer;
                //  background: #d9d6ce;
                width: 100%;
                padding: 0;
                border-radius: 5px;
                border: none;
                outline: none;
                margin-top: -10px;

                &:hover {
                    background: #03af76;
                    color: #fff;
                }
            }

            .login-submit-btn {
                background: #03af76;
                color: #fff;
            }

            .disabled {
                background: #bdbdbd !important;
                color: white !important;
            }

            .form-bottom {
                text-align: left;
                display: flex;
                flex-direction: row;

                .register-btn,
                .forget-btn {
                    color: #3381ff;
                    font-size: 12px;
                    line-height: 30px;
                    margin: 0 10px;
                    cursor: pointer;
                }

                .register-btn {
                    margin-right: 20px;
                }
            }
        }
    }
}

.company-dialog {
    .el-select {
        width: 100%;
    }

    .company-row {
        margin-top: 20px;
    }
}
</style>
